<template>
  <div>
        <el-select v-model="province" placeholder="请选择省份" @change="changeProvince">
            <el-option
            v-for="(item,index) in address1"
            :key="index"
            :label="item.title"
            :value="item.title">
            </el-option>
        </el-select>
        <el-select v-model="city" placeholder="请选择市" @change="changeCity">
            <el-option
                v-for="(item,index) in address2"
                :key="index"
                :label="item.title"
                :value="item.title">
            </el-option>
        </el-select>
        <el-select v-model="county" placeholder="请选择县或区">
            <el-option
                v-for="(item,index) in address3"
                :key="index"
                :label="item.title"
                :value="item.title">
            </el-option>
        </el-select>
    
  </div>
</template>

<script>

export default {
    // name:"address",
    data() {
        return {
            address1:require('../assets/js/area'),
            province:'',
            address2:'',
            city:'',
            address3:'',
            county:'',  
            addressValue:''
        }
    },
    methods:{
        changeProvince(){
            this.city =''
            this.county =''
            // console.log("6666666")
            this.address2 = this.address1.filter(item=>{
                return this.province === item.title
            })
            // console.log(this.address2[0].children)
            this.address2 = this.address2[0].children
        },
        changeCity(){
            this.county=''
            this.address3 = this.address2.filter(item=>{
                return this.city == item.title
            })
            this.address3 = this.address3[0].children        
        }
    },
    mounted(){
        console.log(this.address1)
        // console.log('city:',this.city)
        // this.addressValue = this.province +'省'+ this.city +'市'+ this.county
    },
    updated() {
        this.addressValue = this.county===""?'': this.province +'省'+ this.city +'市'+ this.county
    },
}
</script>

<style>

</style>